<template>
    <div class="setting table-content">
        <pui-dialog :maskClick="false" v-model="componentRef.dialogVisible" :animate="props.animate" :header="false" :footer="false">
            <template #content>
                <div class="flex-box">
                    <div class="table-content__left">
                        <div class="title">首选项</div>
                        <div class="tab-menu">
                            <div :class="['tab-menu-item', componentRef.nowTabIndex === item.id && 'active-item']" v-for="(item, i) in componentRef.tabList" :key="i" @click="tabClickHandle(item)">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="table-content__right">
                        <div class="close">
                            <pui-icon name="close" @click="closeDialog"></pui-icon>
                        </div>
                        <div class="tab-container">
                            <div class="tab-item" v-show="componentRef.nowTabIndex === '0'">
                                <div class="form-item">
                                    <div class="label">外观主题</div>
                                    <pui-selector :dataList="componentRef.themeList" v-model="componentRef.settingJson.theme" @onChange="changeTheme"></pui-selector>
                                    <!-- <pui-selector :dataList="componentRef.themeList" v-model="store.state.theme" @onChange="changeTheme"></pui-selector> -->
                                </div>
                                <div class="form-item">
                                    <div class="label">国际化</div>
                                    <pui-selector :dataList="componentRef.i18nList" v-model="componentRef.settingJson.locale" @onChange="changeLocale"></pui-selector>
                                    <!-- <pui-selector :dataList="componentRef.i18nList" v-model="store.state.locale"></pui-selector> -->
                                </div>
                            </div>
                            <div class="tab-item" v-show="componentRef.nowTabIndex === '1'">
                                <div class="form-item">
                                    <div class="label"><pui-checkbox v-model="componentRef.settingJson.autoSave" label="自动保存" /></div>
                                    <!-- <div class="label"><pui-checkbox v-model="store.state.autoSave" label="自动保存" /></div> -->
                                    <div class="content">备份间隔 <pui-input-number v-model="componentRef.settingJson.backupTime" />分钟</div>
                                    <!-- <div class="content">备份间隔 <pui-input-number v-model="store.state.backupTime" />分钟</div> -->
                                </div>
                            </div>
                            <div class="tab-item" v-show="componentRef.nowTabIndex === '2'">
                                <div class="form-item">
                                    <div class="label">远程服务器IP</div>
                                    <input class="pui-input" v-model="componentRef.settingJson.server.ip" />
                                    <!-- <input class="pui-input" v-model="store.state.serverIP" /> -->
                                </div>
                                <div class="form-item">
                                    <div class="label">远程服务器Port</div>
                                    <input class="pui-input" v-model="componentRef.settingJson.server.port" />
                                    <!-- <input class="pui-input" v-model="store.state.serverPort" /> -->
                                </div>
                                <div class="form-item">
                                    <div class="label">网络诊断</div>
                                    <pui-button @click="testServer">测试</pui-button>
                                    <p :class="['server-text', componentRef.testServer.type]">{{ componentRef.testServer.tip }}</p>
                                </div>
                            </div>
                            <div class="tab-item" v-show="componentRef.nowTabIndex === '3'">
                                <div class="form-item">
                                    <div class="label">默认保存路径</div>
                                    <div class="content">
                                        <input class="pui-input" v-model="componentRef.settingJson.savePath" style="width: 394px;" readonly />
                                        <!-- <input class="pui-input" v-model="store.state.saveRoot" style="width: 394px;" readonly /> -->
                                        <pui-button size="small" style="margin-left: 26px;padding: 6px 10px;" @click="showFolderBrowser">更改路径</pui-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="__btn-box">
                            <pui-button @click="closeDialog">取消</pui-button>
                            <pui-button @click="deleteSetting">删除</pui-button>
                            <pui-button type="primary" @click="saveSetting()">保存</pui-button>
                        </div>
                    </div>
                </div>
            </template>
        </pui-dialog>
    </div>
    <pui-dialog :maskClick="false" v-model="componentRef.saveVisible" :animate="props.animate" title="提示" isFooter>
        <template #header>
            <div>
                提示
            </div>
        </template>
        <template #content>
            <div>
                检测到服务端设置修改，是否重启应用生效？
            </div>
        </template>
        <template #footer>
            <pui-button @click="saveServerSetting">暂不重启</pui-button>
            <pui-button type="primary" @click="saveServerSetting('relaunch')">立即重启</pui-button>
        </template>
    </pui-dialog>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { close } from 'original-fs';
export default defineComponent({
    name: 'Setting'
})
</script>
<script lang="ts" setup>
import { onMounted, reactive, watch, getCurrentInstance } from 'vue'
import { ipcRenderer } from 'electron';
import { useStore } from 'vuex'
import PhotClient from "@photlab/phot-client/src/index"
const store = useStore()
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '系统设置'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const componentRef = reactive({
    dialogVisible: false,
    saveVisible: false,
    tabList: [
        {
            name: '常规',
            id: '0'
        },
        {
            name: '备份',
            id: '1'
        },
        {
            name: '远程连接设置',
            id: '2'
        },
        {
            name: '保存路径',
            id: '3'
        },
    ],
    nowTabIndex: '0',
    themeList: [
        {
            value: 'light',
            label: '明亮'
        },
        {
            value: 'dark',
            label: '暗黑'
        }
    ],
    i18nList: [
        {
            value: 'zh-CN',
            label: '简体中文'
        },
        {
            value: 'en',
            label: 'English'
        }
    ],
    defaultPath: '',
    settingJson: {} as any,
    testServer: {
        type: 'info',
        tip: '未连接'
    },
    oldServer: {} as any
})
const init = async () => {
    componentRef.dialogVisible = true
    componentRef.settingJson = ipcRenderer.sendSync('getStore', '_setting')
    console.log(componentRef.settingJson)
    componentRef.oldServer = JSON.parse(JSON.stringify(componentRef.settingJson.server))
    console.log(componentRef.oldServer)
}
const closeDialog = () => {
    componentRef.dialogVisible = false
}
const tabClickHandle = (e:any) => {
    componentRef.nowTabIndex = e.id
}
const changeTheme = (e: any) => {
    store.dispatch('setTheme', e.value)
	localStorage.setItem('theme', e.value)
    componentRef.settingJson.theme = e.value
    ipcRenderer.send('setStore', '_setting', JSON.stringify(componentRef.settingJson))
}
const changeLocale = (e: any) => {
    componentRef.settingJson.locale = e.value
    ipcRenderer.send('setStore', '_setting', JSON.stringify(componentRef.settingJson))
}
const onFolderSubmit = (e: any) => {
    store.dispatch('setSaveRoot', e.saveRoot)
}
const showFolderBrowser = () => {
    proxy.$parent.$refs.FolderBrowserDialogRef.init('windows')
}
const testServer = async () => {
    try {
        componentRef.testServer.type = 'info'
        componentRef.testServer.tip = '正在连接...'
        setTimeout(() => {
            if (componentRef.testServer.type === 'info') {
                componentRef.testServer.type = 'error'
                componentRef.testServer.tip = '连接失败'
            }
        }, 15000)
        const photClient = new PhotClient([componentRef.settingJson.server.ip, componentRef.settingJson.server.port])
        await photClient.libraryService.getLibraryList('./')
        componentRef.testServer.type = 'success'
        componentRef.testServer.tip = '连接成功'
    } catch (err: any) {
        componentRef.testServer.type = 'error'
        componentRef.testServer.tip = '连接失败'
    }
}
const saveSetting = () => {
    if (componentRef.settingJson.server.ip !== componentRef.oldServer.ip ||componentRef.settingJson.server.port !== componentRef.oldServer.port) {
        componentRef.saveVisible = true
    } else {
        ipcRenderer.send('setStore', '_setting', JSON.stringify(componentRef.settingJson))
        proxy.$toast({
            type: 'success',
            value: '保存成功！'
        })
        closeDialog()
    }
}
const saveServerSetting = (type: any) => {
    componentRef.saveVisible = false
    console.log(componentRef.settingJson)
    ipcRenderer.send('setStore', '_setting', JSON.stringify(componentRef.settingJson))
    if (type === 'relaunch') {
        proxy.$loading.open('正在重启...')
        ipcRenderer.send('control', 'relaunch')
        proxy.$loading.close()
        proxy.$toast({
            type: 'success',
            value: '重启成功！'
        })
    }
    closeDialog()
}
const deleteSetting = () => {
    ipcRenderer.send('clearStore')
    // ipcRenderer.send('deleteStore', '_setting')
}
defineExpose({
    init
})
</script>